import React, { useMemo } from "react";
import { useSelector } from "react-redux";
import { routeMatch } from "../store";
import AsyncComponent from "../compoents/async-component";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { usePrevious } from "ahooks";
// const routeMap = (path: PathString) => {
//   return <Login />;
// };
import { jsx as _jsx } from "react/jsx-runtime";
var ANIMATION_MAP = {
    PUSH: "forward",
    BACK: "back"
};
export default function Wallet() {
    var _routeMatch;
    var _useSelector = useSelector(function(state) {
        return state.app;
    }), path = _useSelector.path, history = _useSelector.history;
    var loader = ((_routeMatch = routeMatch(path)) === null || _routeMatch === void 0 ? void 0 : _routeMatch.component) || function() {
        return Promise.resolve({
            default: function() {
                return null;
            }
        });
    };
    var pathname = useMemo(function() {
        return typeof path === "object" ? path.path : path;
    }, [
        path
    ]);
    var prevHistoryLength = usePrevious(history.length) || 0;
    var type = history.length >= prevHistoryLength ? "PUSH" : "BACK";
    return /*#__PURE__*/ _jsx(TransitionGroup, {
        childFactory: function(child) {
            var classNames = ANIMATION_MAP[type];
            return /*#__PURE__*/ React.cloneElement(child, {
                classNames: classNames
            });
        },
        style: {
            // overflowX: "hidden",
            position: "relative",
            height: "100%"
        },
        children: /*#__PURE__*/ _jsx(CSSTransition, {
            timeout: 300,
            unmountOnExit: true,
            children: /*#__PURE__*/ _jsx(AsyncComponent, {
                loader: loader
            })
        }, pathname)
    });
}

 //# sourceMappingURL=index.js.map